import * as THREE from './three.module.js'; // 使用模块仍然没有提示

// var scene = new THREE.Scene();
// var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// var renderer = new THREE.WebGLRenderer();
// renderer.setSize(window.innerWidth, window.innerHeight);
// document.body.appendChild(renderer.domElement);
// var geometry = new THREE.BoxGeometry();  // 几何体，CubeGeometry的新名字
// var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// var cube = new THREE.Mesh(geometry, material);
// scene.add(cube);
// camera.position.z = 5;
// function render() {
//     requestAnimationFrame(render);  // 动画帧
//     cube.rotation.x += 0.1;
//     cube.rotation.y += 0.1;
//     renderer.render(scene, camera);
// }
// render();   // 开始旋转！\(^o^)/~

let renderer;
let width;
let height;
function initThree() {
    width = document.getElementById('canvas-frame').clientWidth;
    height = document.getElementById('canvas-frame').clientHeight;
    renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setSize(width, height);
    document.getElementById('canvas-frame').appendChild(renderer.domElement);
    renderer.setClearColor(0xFFFFFF, 1.0);
}

let camera;
function initCamera() {
    camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
    camera.position.x = 0;
    camera.position.y = 1000;
    camera.position.z = 0;
    camera.up.x = 0;
    camera.up.y = 0;
    camera.up.z = 1;
    camera.lookAt({ x: 0, y: 0, z: 0 });
}

let scene;
function initScene() {
    scene = new THREE.Scene();
}

let light;
function initLight() {
    light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);
    light.position.set(100, 100, 200);
    scene.add(light);
}

let cube;
function initObject() {
    var geometry = new THREE.BoxGeometry();
    var material = new THREE.LineBasicMaterial({ vertexColors: true });
    var color1 = new THREE.Color(0x444444), color2 = new THREE.Color(0xFF0000);

    var p1 = new THREE.Vector3(-100, 0, 100);
    var p2 = new THREE.Vector3(100, 0, -100);
    geometry.vertices.push(p1);
    geometry.vertices.push(p2);
    geometry.colors.push(color1, color2);

    var line = new THREE.Line(geometry, material, THREE.LinePieces);
    scene.add(line);
}

function threeStart() {
    initThree();
    initCamera();
    initScene();
    initLight();
    initObject();
    renderer.clear();
    renderer.render(scene, camera);
}

window.onload = (ev) => {
    console.log('onload!')
    threeStart();
};

